<template>
  <view class="doctor-list">
    <view class="doctor-list__slide">
      <view :class="{'slide-item': true, 'active': item.name === current}" v-for="(item, index) in list" :key="index" @tap="select(item)">
        <text>{{item.name}}</text>
      </view>
    </view>
    <view class="doctor-list__container">
      <view class="doctor-list__wrapper" v-if="currentDoctor">
        <view class="top">
          <pane-card :title="currentDoctor.name">
            <view class="doctor-avator" slot="icon">
              <image :src="currentDoctor.avator"></image>
            </view>
            <view class="doctor-detail" slot="subtitle">
              <text class="block">{{currentDoctor.work}}</text>
            </view>
          </pane-card>
        </view>
        <view class="section">
          <view class="header flex-align l-100">
            <text class="title">擅长领域</text>
          </view>
          <text class="content">{{currentDoctor.special}}</text>
        </view>
        <view class="section">
          <view class="header flex-align l-100">
            <text class="title">医生介绍</text>
          </view>
          <text class="content">{{currentDoctor.desc}}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import PaneCard from '@/components/m-card/pane-card.vue'
  export default {
    components: {
      PaneCard
    },
    data() {
      return {
        current: '',
        list: [
        {
          name: '医生1',
          avator: require('./avator.svg'),
          work: '副主任医师',
          special: '功能性肠胃病，胃食管反流病等消化行疾病',
          desc: 'xxxx年毕业于清华大学医学系，xxxx获得硕士学位，临床工作多年，积累了丰富的临床工作经验，在核心期刊发表了多篇论文'
        },
        {
          name: '医生2',
          avator: require('./avator.svg'),
          work: '副主任医师',
          special: '功能性肠胃病，胃食管反流病等消化行疾病',
          desc: 'xxxx年毕业于清华大学医学系，xxxx获得硕士学位，临床工作多年，积累了丰富的临床工作经验，在核心期刊发表了多篇论文'
        },
        {
          name: '医生3',
          avator: require('./avator.svg'),
          work: '副主任医师',
          special: '功能性肠胃病，胃食管反流病等消化行疾病',
          desc: 'xxxx年毕业于清华大学医学系，xxxx获得硕士学位，临床工作多年，积累了丰富的临床工作经验，在核心期刊发表了多篇论文'
        },
        {
          name: '医生4',
          avator: require('./avator.svg'),
          work: '副主任医师',
          special: '功能性肠胃病，胃食管反流病等消化行疾病',
          desc: 'xxxx年毕业于清华大学医学系，xxxx获得硕士学位，临床工作多年，积累了丰富的临床工作经验，在核心期刊发表了多篇论文'
        }]
      }
    },
    computed: {
      currentDoctor() {
        const target = this.list.find(item => item.name === this.current)

        return target
      }
    },
    methods: {
      select(item) {
        this.current = item.name
      }
    },
    created() {
      this.current = this.list[0].name
    }
  }
</script>
<style lang="scss">
  .doctor-list {
    width: 100%;
    // padding: 30rpx 0;
    display: flex;

    &__slide {
      width: 140rpx;
      // height: 100vh;
      background-color: rgba($color: #000000, $alpha: 0.05);

      .slide-item {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        &.active {
          background-color: #ffffff;
          color: $uni-color-primary;
        }
      }
    }

    &__container {
      padding: 20rpx 0 0 40rpx;
      flex: 1;

      pane-card,
      .pane-card {
        margin: 0;
        width: 100%;
        padding: 0;
        box-shadow: none;
        // border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
      }

      image {
        width: 160rpx;
        height: 160rpx;
      }

      .title {
        font-size: 32rpx;
        color: $uni-sub-text-color;
      }

      .l-100 {
        min-height: 100rpx;
      }

      .flex-align {
        display: flex;
        align-items: center;
      }
    }
  }
</style>